<template>
  <div class="table">
    <div class="content-common">
      <div class="header-title">土壤水分监测成果</div>
      <!-- 顶部搜索条件-->
      <div class="search-top">
        <el-form :label-position="'top'" :inline="true" :model="query">
          <el-form-item label="站点类型">
            <el-select style="width: 160px" v-model="query.stType" filterable clearable placeholder="请选择" :disabled="isView" @change="typeChange">
              <el-option v-for="item in stTypeList" :key="item.value" :label="item.label" :value="item.value"> </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="站点名称">
            <el-select style="width: 160px" v-model="query.stnm" filterable clearable placeholder="请选择">
              <el-option v-show="item.stType == query.stType" v-for="item in stationData" :key="item.stcd" :label="item.stnm" :value="item.stcd"> </el-option>
            </el-select>
          </el-form-item>
        </el-form>
      </div>
      <!-- 折线图-->
      <div id="mychart" ref="mychart" style="width: 100%; height: 500px"></div>
    </div>
  </div>
</template>

<script>
import axios from 'axios';
import * as echarts from 'echarts';
import {
  sysdictviewlistDictItem,
  pageVisitRecord, //分页查询
  viewPageStationInfo,
  delVisitRecord //删除
} from '../../../api/index';
export default {
  name: 'zhengbianguancao',
  components: {},
  data() {
    return {
      globalUser: [],
      page: {
        currentPage: 1,
        pageSize: 10,
        totalPage: 0,
        totalSize: 0
      },
      query: {
        stnm: '',
        receptionType: '',
        stType: ''
      },
      formInline: {},
      stationData: [],
      checkArr: [],
      tijiaoform: {
        status: 1
      },
      isView: false,
      dialogMes: {
        show: false,
        query: {}
      },
      stTypeList: [
        { label: '坡面径流场', value: 1 },
        { label: '小流域控制站', value: 2 }
      ],
      bgColors: ['hsla(215, 100%, 71%, 0.2)', 'hsla(106, 67%, 58%, 0.2)'], //图示颜色
      colors: ['#69A8FF', '#6DDC4C'], //图示颜色
      monthData: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
    };
  },
  created() {
    this.globalUser = globalUser;
    let that = this;
    this.query.year = globalyear;

    this.getstationData();
    this.getchecktype();
    this.getData();
    // setTimeout(() => {
    //   that.initChart();
    // }, 500);
  },
  methods: {
    getchecktype() {
      let that = this;
      sysdictviewlistDictItem({
        dictCode: 'ZD-000004'
      })
        .then((e) => {
          that.checkArr = e.object;
        })
        .catch((err) => {
          console.log(err);
        });
    },
    getstationData() {
      let data = {
        currentPage: 1,
        pageSize: 1000
      };
      viewPageStationInfo(data).then((res) => {
        this.stationData = res.object.dataList;
      });
    },
    // 获取数据
    getData() {
      let data = {
        currentPage: this.page.currentPage,
        pageSize: 10,
        stcd: this.query.stnm || '',
        stType: this.query.stType || '',
        receptionType: this.query.receptionType || ''
      };
      //   获取数据
      pageVisitRecord(data).then((res) => {
        // this.tableData = res.object.dataList;
        // console.log(this.tableData);
        // this.page = res.object.page;
        const _data = [
          {
            year: 2022,
            data: [10, 15, 23, 59, 45, 25, 11, 20, 22, 66, 16, 33]
          },
          {
            year: 2023,
            data: [23, 59, 45, 10, 56, 20, 22, 66, 25, 11, 16, 33]
          }
        ];
        this.tableData = _data;
        // 获取到数据之后再去渲染图标
        this.initChart(_data);
      });
    },
    initChart(arr) {
      var myChart = echarts.init(document.getElementById('mychart'));
      let option = {
        title: {
          text: '产沙量： t/hm²',
          textStyle: {
            fontFamily: 'PingFangSC, PingFang SC',
            fontSize: 14,
            color: '#252B46',
            fontWeight: 400
          }
        },
        tooltip: {},
        legend: {
          icon: 'pin',
          textStyle: {
            color: '#252B46',
            fontSize: 14,
            fontWeight: 400,
            height: 32,
            lineHeight: 32
          }
        },
        grid: {
          left: 50,
          right: 0
        },
        xAxis: {
          data: this.monthData,
          minorSplitLine: {
            show: false
          },
          axisTick: { show: false },
          axisLine: { show: false },
          axisLabel: {
            margin: 55,
            fontFamily: 'PingFangSC, PingFang SC',
            fontSize: 14,
            color: '#252B46'
          },
          splitLine: {
            show: false
          }
        },
        yAxis: [],
        series: []
      };
      // 生产series数据
      arr.forEach((element, index) => {
        option.series[index] = {
          name: element.year,
          type: 'line',
          smooth: true,
          symbolSize: 16,
          itemStyle: {
            color: this.colors[index]
          },
          lineStyle: {
            width: 4
          },
          areaStyle: {
            color: {
              type: 'linear',
              x: 0,
              y: 0,
              x2: 0,
              y2: 1,
              colorStops: [
                {
                  offset: 0,
                  color: this.colors[index] // 0% 处的颜色
                },
                {
                  offset: 1,
                  color: this.bgColors[index] // 100% 处的颜色
                }
              ],
              global: false // 缺省为 false
            }
          },
          data: element.data
        };
      });

      option.yAxis[0] = {
        type: 'value',
        min: 0,
        interval: 10,
        axisLabel: {
          formatter: '{value}',
          fontFamily: 'PingFangSC, PingFang SC',
          fontSize: 14,
          color: '#252B46'
        }
      };
      myChart.setOption(option);
    },
    typeChange() {
      this.query.stnm = '';
    }
  }
};
</script>

<style scoped>
.content-common {
  padding: 30px 30px;
}
.search-top {
  margin-bottom: 20px;
  border-bottom: 2px solid #ebebeb;
}

.header-title {
  font-family: PingFangSC, PingFang SC;
  font-weight: 500;
  font-size: 24px;
  color: #252b46;
  line-height: 33px;
  text-align: center;
  font-style: normal;
}
</style>

